<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户信息管理</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
	</head>
	<body>
		
		<div class="panel panel-warning">
		    <div class="panel-heading">
		        <h2 align="center">用户信息列表</h2>
		    </div>
		    <div class="panel-body">
		        <!-- <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
					<span class="glyphicon glyphicon-plus-sign"></span> 添加用户
				</button> -->
				<button type="button" class="btn btn-success" onclick="openUserDialog()">
					<span class="glyphicon glyphicon-plus-sign"></span> 添加用户
				</button>
				
				<div id="userList">
					
				</div>
				
				<!-- 模态框（Modal） -->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				    <div class="modal-dialog">
				        <div class="modal-content">
				            <div class="modal-header">
				                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				                <h4 class="modal-title" id="myModalLabel"> 
									<span class="glyphicon glyphicon-plus-sign"></span> 添加用户
								</h4>
				            </div>
				            <div class="modal-body">
								
								<!-- 准备添加用户的表单元素  -->
								<form class="form-horizontal" role="form">
								  <div class="form-group" id="userIdTxt">
								    <label for="userId" class="col-sm-2 control-label">编号</label>
								    <div class="col-sm-8">
								      <input type="text" class="form-control" id="userId" placeholder="请输入编号">
								    </div>
								  </div>
								  <div class="form-group">
								    <label for="userName" class="col-sm-2 control-label">姓名</label>
								    <div class="col-sm-8">
								      <input type="text" class="form-control" id="userName" placeholder="请输入姓名">
								    </div>
								  </div>
								  <div class="form-group">
								    <label for="userPwd" class="col-sm-2 control-label">密码</label>
								    <div class="col-sm-8">
								      <input type="password" class="form-control" id="userPwd" placeholder="请输入密码">
								    </div>
								  </div>
								  <div class="form-group">
								    <label for="userAge" class="col-sm-2 control-label">年龄</label>
								    <div class="col-sm-8">
								      <input type="number" min="1" max="100" class="form-control" id="userAge" placeholder="请输入年龄">
								    </div>
								  </div>
								  
								  <div class="form-group">
								    <label for="userSex" class="col-sm-2 control-label">性别</label>
								    <div class="col-sm-8">
										<label class="radio-inline">
											<input type="radio" name="userSex"  value="男" > 男
										</label>
										<label class="radio-inline">
											<input type="radio" name="userSex"   value="女"> 女
										</label>
								    </div>
								  </div>
								  
								  <!--  
									设置隐藏域，用来存放用户编号（主键）。
									通过主键来判断当前执行的是添加还是修改操作
										如果主键为空，则表示添加操作；
										如果主键不为空，则表示修改操作
									
									注：
										当点击添加按钮时，设置值为空；
										当修改修改按钮时，设置值为编号
								  -->
								  <input type="hidden" id="key" value="" />
								
								</form>
								
							</div>
				            <div class="modal-footer">
								<span id="msg" style="color: red;font-size: 12px;;"></span>
								&nbsp;&nbsp;&nbsp;&nbsp;
				                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				                <button type="button" class="btn btn-primary" id="submitBtn">提交更改</button>
				            </div>
				        </div><!-- /.modal-content -->
				    </div><!-- /.modal -->
				</div>
				
		    </div>
		</div>
		<!--  Bootstrap框架是基于Jquery的，在引入bootstrap的核心JS文件之前，需要引入Jquery的JS文件 -->
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- jquery confirm插件  -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
		<script src="js/user.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
